<script>
  const wrapper = document.getElementById("PlayerWraper");
  const video = document.getElementById("video");
  const playBtn = document.getElementById("playBtn");
  const playIcon = document.getElementById("playIcon");
  const rewindBtn = document.getElementById("rewindBtn");
  const forwardBtn = document.getElementById("forwardBtn");
  const muteBtn = document.getElementById("muteBtn");
  const volIcon = document.getElementById("volIcon");
  const volumeSlider = document.getElementById("volumeSlider");
  const progressArea = document.getElementById("progressArea");
  const progressFill = document.getElementById("progressFill");
  const progressThumb = document.getElementById("progressThumb");
  const bufferBar = document.getElementById("bufferBar");
  const currentTimeEl = document.getElementById("currentTime");
  const durationEl = document.getElementById("duration");
  const speedWrap = document.getElementById("speedWrap");
  const speedBtn = document.getElementById("speedBtn");
  const speedMenu = document.getElementById("speedMenu");
  const fsBtn = document.getElementById("fsBtn");
  const fsIcon = document.getElementById("fsIcon");

  /* ─── Helpers ─── */
  function toFA(n) {
    return String(n).replace(/\d/g, (d) => "۰۱۲۳۴۵۶۷۸۹"[d]);
  }
  function formatTime(s) {
    s = Math.floor(s || 0);
    const m = Math.floor(s / 60);
    const sec = String(s % 60).padStart(2, "0");
    return toFA(m) + ":" + toFA(sec);
  }

  /* ─── Play / Pause ─── */
  const playPath =
    "M7.09 20C6.86478 20.0114 6.64055 19.9631 6.44 19.86C5.12 19.08 5 13.58 5 11.92C5 9.83 5.14 4.92 6.43 4.16C7.73 3.4 12.05 5.74 13.85 6.78C15.3 7.61 20 10.43 20 12C20 13.57 15.76 16.12 13.93 17.17C12.34 18.08 8.82 20 7.09 20Z";
  const pausePath =
    "M7.21579 4.08579C7.59086 3.71071 8.09957 3.5 8.63 3.5C9.16044 3.5 9.66915 3.71071 10.0442 4.08579C10.4193 4.46086 10.63 4.96957 10.63 5.5V18.5C10.63 19.0304 10.4193 19.5391 10.0442 19.9142C9.66915 20.2893 9.16044 20.5 8.63 20.5C8.09957 20.5 7.59086 20.2893 7.21579 19.9142C6.84072 19.5391 6.63 19.0304 6.63 18.5V5.5C6.63 4.96957 6.84072 4.46086 7.21579 4.08579ZM14.2158 4.08579C14.5909 3.71071 15.0996 3.5 15.63 3.5C15.8926 3.5 16.1527 3.55173 16.3954 3.65224C16.638 3.75275 16.8585 3.90007 17.0442 4.08579C17.2299 4.2715 17.3773 4.49198 17.4778 4.73463C17.5783 4.97728 17.63 5.23736 17.63 5.5V18.5C17.63 19.0304 17.4193 19.5391 17.0442 19.9142C16.6691 20.2893 16.1604 20.5 15.63 20.5C15.0996 20.5 14.5909 20.2893 14.2158 19.9142C13.8407 19.5391 13.63 19.0304 13.63 18.5V5.5C13.63 4.96957 13.8407 4.46086 14.2158 4.08579Z";

  function setPlayIcon(playing) {
    playIcon
      .querySelector("path")
      .setAttribute("d", playing ? pausePath : playPath);
    playing
      ? wrapper.classList.remove("paused")
      : wrapper.classList.add("paused");
  }

  function togglePlay() {
    video.paused ? video.play() : video.pause();
    triggerRipple();
  }

  playBtn.addEventListener("click", togglePlay);
  video.addEventListener("click", togglePlay);
  video.addEventListener("play", () => setPlayIcon(true));
  video.addEventListener("pause", () => setPlayIcon(false));
  video.addEventListener("ended", () => setPlayIcon(false));

  /* ─── Skip ─── */
  rewindBtn.addEventListener("click", () => {
    video.currentTime = Math.max(0, video.currentTime - 15);
  });
  forwardBtn.addEventListener("click", () => {
    video.currentTime = Math.min(video.duration, video.currentTime + 15);
  });

  /* ─── Progress ─── */
  video.addEventListener("loadedmetadata", () => {
    durationEl.textContent = formatTime(video.duration);
  });

  video.addEventListener("timeupdate", () => {
    if (!video.duration) return;
    const pct = (video.currentTime / video.duration) * 100;
    progressFill.style.width = pct + "%";
    progressThumb.style.left = pct + "%";
    currentTimeEl.textContent = formatTime(video.currentTime);
  });

  video.addEventListener("progress", () => {
    if (video.buffered.length) {
      const buffered =
        (video.buffered.end(video.buffered.length - 1) / video.duration) * 100;
      bufferBar.style.width = buffered + "%";
    }
  });

  let dragging = false;
  function seekTo(e) {
    const rect = progressArea.getBoundingClientRect();
    const pct = Math.min(Math.max((e.clientX - rect.left) / rect.width, 0), 1);
    video.currentTime = pct * video.duration;
  }
  progressArea.addEventListener("mousedown", (e) => {
    dragging = true;
    seekTo(e);
  });
  document.addEventListener("mousemove", (e) => {
    if (dragging) seekTo(e);
  });
  document.addEventListener("mouseup", () => {
    dragging = false;
  });

  /* ─── Volume ─── */
  let lastVol = 1;
  function updateVolIcon(muted, vol) {
    let d = "";
    if (muted || vol === 0) {
      d = `<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
           <line x1="23" y1="9" x2="17" y2="15" stroke="currentColor" stroke-width="2"/>
           <line x1="17" y1="9" x2="23" y2="15" stroke="currentColor" stroke-width="2"/>`;
    } else if (vol < 0.5) {
      d = `<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
           <path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>`;
    } else {
      d = `<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/>
           <path d="M15.54 8.46a5 5 0 0 1 0 7.07"/>
           <path d="M19.07 4.93a10 10 0 0 1 0 14.14"/>`;
    }
    volIcon.innerHTML = d;
  }

  muteBtn.addEventListener("click", () => {
    if (video.muted || video.volume === 0) {
      video.muted = false;
      video.volume = lastVol || 1;
      volumeSlider.value = video.volume;
    } else {
      lastVol = video.volume;
      video.muted = true;
      volumeSlider.value = 0;
    }
    updateVolIcon(video.muted, video.volume);
  });

  volumeSlider.addEventListener("input", () => {
    video.volume = volumeSlider.value;
    video.muted = video.volume === 0;
    if (video.volume > 0) lastVol = video.volume;
    updateVolIcon(video.muted, video.volume);
  });

  /* ─── Speed ─── */
  speedBtn.addEventListener("click", (e) => {
    e.stopPropagation();
    speedWrap.classList.toggle("open");
  });
  document.addEventListener("click", () => speedWrap.classList.remove("open"));

  speedMenu.querySelectorAll("button").forEach((btn) => {
    btn.addEventListener("click", (e) => {
      e.stopPropagation();
      const s = parseFloat(btn.dataset.speed);
      video.playbackRate = s;
      speedBtn.textContent = s + "×";
      speedMenu
        .querySelectorAll("button")
        .forEach((b) => b.classList.remove("active"));
      btn.classList.add("active");
      speedWrap.classList.remove("open");
    });
  });

  /* ─── Fullscreen ─── */
  const fsEnter = `<svg><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>`;
  const fsExit = `<svg>< viewBox="0 0 24 24" ><path d="M8.79289 2.79289C8.98043 2.60536 9.23478 2.5 9.5 2.5C9.76522 2.5 10.0196 2.60536 10.2071 2.79289C10.3946 2.98043 10.5 3.23478 10.5 3.5V7.5C10.5 8.29565 10.1839 9.05871 9.62132 9.62132C9.05871 10.1839 8.29565 10.5 7.5 10.5H3.5C3.23478 10.5 2.98043 10.3946 2.79289 10.2071C2.60536 10.0196 2.5 9.76522 2.5 9.5C2.5 9.23478 2.60536 8.98043 2.79289 8.79289C2.98043 8.60536 3.23478 8.5 3.5 8.5H7.5C7.76522 8.5 8.01957 8.39464 8.20711 8.20711C8.39464 8.01957 8.5 7.76522 8.5 7.5V3.5C8.5 3.23478 8.60536 2.98043 8.79289 2.79289ZM3.5 13.5H7.5C8.29565 13.5 9.05871 13.8161 9.62132 14.3787C10.1839 14.9413 10.5 15.7044 10.5 16.5V20.5C10.5 20.7652 10.3946 21.0196 10.2071 21.2071C10.0196 21.3946 9.76522 21.5 9.5 21.5C9.23478 21.5 8.98043 21.3946 8.79289 21.2071C8.60536 21.0196 8.5 20.7652 8.5 20.5V16.5C8.5 16.2348 8.39464 15.9804 8.20711 15.7929C8.01957 15.6054 7.76522 15.5 7.5 15.5H3.5C3.23478 15.5 2.98043 15.3946 2.79289 15.2071C2.60536 15.0196 2.5 14.7652 2.5 14.5C2.5 14.2348 2.60536 13.9804 2.79289 13.7929C2.98043 13.6054 3.23478 13.5 3.5 13.5ZM20.5 13.5H16.5C15.7044 13.5 14.9413 13.8161 14.3787 14.3787C13.8161 14.9413 13.5 15.7044 13.5 16.5V20.5C13.5 20.7652 13.6054 21.0196 13.7929 21.2071C13.9804 21.3946 14.2348 21.5 14.5 21.5C14.7652 21.5 15.0196 21.3946 15.2071 21.2071C15.3946 21.0196 15.5 20.7652 15.5 20.5V16.5C15.5 16.2348 15.6054 15.9804 15.7929 15.7929C15.9804 15.6054 16.2348 15.5 16.5 15.5H20.5C20.7652 15.5 21.0196 15.3946 21.2071 15.2071C21.3946 15.0196 21.5 14.7652 21.5 14.5C21.5 14.2348 21.3946 13.9804 21.2071 13.7929C21.0196 13.6054 20.7652 13.5 20.5 13.5ZM20.5 10.5H16.5C15.7044 10.5 14.9413 10.1839 14.3787 9.62132C13.8161 9.05871 13.5 8.29565 13.5 7.5V3.5C13.5 3.23478 13.6054 2.98043 13.7929 2.79289C13.9804 2.60536 14.2348 2.5 14.5 2.5C14.7652 2.5 15.0196 2.60536 15.2071 2.79289C15.3946 2.98043 15.5 3.23478 15.5 3.5V7.5C15.5 7.76522 15.6054 8.01957 15.7929 8.20711C15.9804 8.39464 16.2348 8.5 16.5 8.5H20.5C20.7652 8.5 21.0196 8.60536 21.2071 8.79289C21.3946 8.98043 21.5 9.23478 21.5 9.5C21.5 9.76522 21.3946 10.0196 21.2071 10.2071C21.0196 10.3946 20.7652 10.5 20.5 10.5Z"></path></svg>`;

  fsBtn.addEventListener("click", () => {
    if (!document.fullscreenElement) {
      wrapper.requestFullscreen();
    } else {
      document.exitFullscreen();
    }
  });
  document.addEventListener("fullscreenchange", () => {
    const isFS = !!document.fullscreenElement;
    fsIcon.innerHTML = isFS ? fsExit : fsEnter;
    fsBtn.dataset.tip = isFS ? "خروج از تمام صفحه" : "تمام صفحه";
  });

  /* ─── Keyboard ─── */
  document.addEventListener("keydown", (e) => {
    if (["INPUT", "TEXTAREA"].includes(e.target.tagName)) return;
    if (e.key === " " || e.key === "k") {
      e.preventDefault();
      togglePlay();
    }
    if (e.key === "ArrowLeft") {
      video.currentTime = Math.max(0, video.currentTime - 15);
    }
    if (e.key === "ArrowRight") {
      video.currentTime = Math.min(video.duration, video.currentTime + 15);
    }
    if (e.key === "ArrowUp") {
      video.volume = Math.min(1, video.volume + 0.1);
      volumeSlider.value = video.volume;
      updateVolIcon(false, video.volume);
    }
    if (e.key === "ArrowDown") {
      video.volume = Math.max(0, video.volume - 0.1);
      volumeSlider.value = video.volume;
      updateVolIcon(video.volume === 0, video.volume);
    }
    if (e.key === "f") {
      fsBtn.click();
    }
  });
</script>